<template>
  <view class="index">
    <!-- 搜索 -->
    <van-search
      shape="round"
      background="#d81e06"
      placeholder="请输入搜索关键词"
    />
    <!-- 轮播图 -->
    <view class="index_swiper">
      <swiper autoplay circular indicator-dots interval="3000">
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image :src="item.image_src" mode="widthFix"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 导航栏 -->
    <view class="index_nav">
      <view
        class="index_nav_item"
        v-for="(item, index) in navList"
        :key="index"
      >
        <image mode="widthFix" :src="item.image_src"></image>
      </view>
    </view>
    <!-- 楼层 -->
    <view class="index_floor">
      <view
        class="index_floor_groud"
        v-for="(item, index) in floorList"
        :key="index"
      >
        <view class="floor_title">
          <image mode="widthFix" :src="item.floor_title.image_src"> </image>
        </view>
        <view class="floor_content">
          <view
            class="floor_item"
            v-for="(item2, index2) in item.product_list"
            :key="index2"
          >
            <image
              :mode="index2 === 0 ? 'widthFix' : 'scaleToFill'"
              :src="item2.image_src"
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      swiperList: [],
      // 导航栏数据
      navList: [],
      // 楼层数据
      floorList: [],
    };
  },
  // 监听页面
  onLoad() {
    this.getSwiper();
    this.getNav();
    this.getFloor();
  },
  methods: {
    // 获取轮播图
    async getSwiper() {
      this.swiperList = await this.get({ url: "/home/swiperdata" });
    },
    // 获取导航
    async getNav() {
      this.navList = await this.get({ url: "/home/catitems" });
    },
    // 获取楼层
    async getFloor() {
      this.floorList = await this.get({ url: "/home/floordata" });
    },
  },
};
</script>

<style lang="less">
page {
  background-color: #f4f4f4;
}
.index_swiper {
  background-color: #fff;
  swiper {
    height: 340rpx;
  }
}
.index_nav {
  background-color: #fff;
  display: flex;
  .index_nav_item {
    flex: 1;
    padding: 20rpx;
  }
}
.index_floor {
  .index_floor_groud {
    .floor_title {
      padding: 10rpx;
    }
    .floor_content {
      overflow: hidden;
      .floor_item {
        width: 33.33%;
        float: left;
        border: 5rpx solid #fff;
      }
      .floor_item:nth-last-child(-n + 4) {
        height: 208rpx;
        image {
          height: 100%;
        }
      }
    }
  }
}
</style>